<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 用户注册 </el-breadcrumb-item>
                <el-breadcrumb-item>用户注册</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.Login"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.Pwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="确定密码">
                        <el-input v-model="form.Pwdtwo" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.UserName"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="form.Phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.Emali"></el-input>
                    </el-form-item>
                    <el-form-item label="上传头像">
                        <el-upload action="http://localhost:5069/api/User/PicLoad" list-type="picture-card" :on-success="PostUserImg">
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定注册</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { PostUserInfo } from '@/api/users.js/';
export default {
    name: 'baseform',
    data() {
        return {
            form: {
                Login: '',
                Pwd: '',
                Pwdtwo: '',
                UserName: '',
                Phone: '',
                Emali: '',
                UserImg: ''
            }
        };
    },
    methods: {
        onSubmit() {
            console.log(this.form);
            if (this.form.Pwd != this.form.Pwdtwo) {
                this.$message({
                    showClose: true,
                    message: '两次密码不一致',
                    type: 'error'
                });
                return;
            }
            //this.$message.success('提交成功！');
            PostUserInfo(this.form).then((res) => {
                if (res.Data == 200) {
                    //注册成功！
                    this.$message.success(res.Message);
                } else {
                    //注册失败！
                    this.$message({
                        showClose: true,
                        message: res.Message,
                        type: 'error'
                    });
                }
            });
        },
        PostUserImg(val) {
            this.form.UserImg = val.Data;
            console.log(this.form.UserImg);
        }
    }
};
</script>